<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./src/vue.js"></script>
<style>
    .fnt{
        font-size: 45px;
        font-weight: bold;
        
    }
    .text-shadow{
        text-shadow: 2px 3px 1px gray;
    }
</style>
</head>
 
<body>
    <div id="app">
        <div @click="next">
            <ul>
                <li style="list-style-type:none;">
                    <span v-for='d,i in res'>
                        <span>
                            <span class="fnt" v-for='it,index in d'>
                                <span v-if="index<5" style="color: red;" class="text-shadow"> 
                                    <span v-if="it<10">
                                        0{{it}}
                                    </span>
                                    <span v-else>
                                        {{it}}
                                    </span>
                                </span> 
                                <span v-else style="color: blue;" class="text-shadow">
                                    <span v-if="it<10">
                                        0{{it}}
                                    </span>
                                    <span v-else>
                                        {{it}}
                                    </span>
                                </span>
                            </span> 
                        </span>
                        
                        <br/> 
                </li>
            </ul>
        </div>
        
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return{
                red:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],
                blue:[1,2,3,4,5,6,7,8,9,10,11,12],
                res:[[],[],[],[],[],[],[]],
                bres:[[],[],[],[],[],[]],
            }
            
        },
        mounted(){
            this.initData();
        },
        //方法
        methods:{
            initData(){
                this.shuffle(this.red);
                for(var i = 0;i<this.red.length;i++){
                    this.res[i%7].push(this.red[i]);
                }
                this.shuffle(this.blue);
                for(var i = 0;i<this.blue.length;i++){
                    this.res[i%6].push(this.blue[i]);
                }
                this.shuffle(this.blue);
                this.res[6].push(this.blue[0]);
                this.res[6].push(this.blue[1]);
            },
            onTick(){
                 
            },
            reset(){
                this.red=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35];
                this.blue=[1,2,3,4,5,6,7,8,9,10,11,12];
                this.res=[[],[],[],[],[],[],[]];
                this.bres=[[],[],[],[],[],[]];
            },
            next(){
                this.reset();
                this.initData();
            },
            shuffle(data){
                for(var i = 0;i<data.length;i++){
                    var position = Math.floor(Math.random()*data.length);
                    var temp = data[0];
                    this.$set(data,0,data[position]);
                    this.$set(data,position,temp);
                }
            }
        }
    })
</script>
</html>